<!DOCTYPE html>
<html ng-app>
	<head >
		<meta charset="utf-8">
		<title>Optional</title>
		<link rel="stylesheet" href="styles/bootstrap.min.css">
		<link rel="stylesheet" href="styles/ps-side.css">
		<script src="scripts/jquery-1.9.0.js" type="text/javascript"></script>
		<script src="scripts/bootstrap.min.js" type="text/javascript"></script>
		<script src="scripts/angular.js" type="text/javascript"></script>
		<script type="text/javascript" src="scripts/controllers/TabsController.js"></script>
	</head>
	<body>
		<div id="wrapper" ng-controller="TabsController">
			<nav>
				<ul class="nav nav-tabs">
					
					<li class="left" ><a href="#current" data-toggle="tab">Текущи проблеми</a></li>
					

					<li class="right" ><a href="#" data-toggle="tab">Charifyer</a></li>
					
					<li class="left" ><a href="#map" data-toggle="tab">Карта</a></li>
					<li class="left" ><a href="#data" data-toggle="tab">Датата е тук</a></li>
				</ul>
			</nav>
			<div id="bgr" >
				<p>asd</p>
			</div>
			



			

			<!-- NEWEST PROBLEMS -->
			<div id="new">
				<div class="panel panel-default">
					<div class="panel-heading">
						<div class="panel-title">
							{{newest[0].name}}
						</div>
					</div>
					<div class="panel-body">
					  {{newest[0].info}}
					</div>
				</div>
				<div class="panel panel-default">
			  		<div class="panel-heading">
			  			<div class="panel-title">{{newest[1].name}}</div>
			  		</div>
				    <div class="panel-body">
				    	{{newest[1].info}}
				    </div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						<div class="panel-title">
							{{newest[2].name}}
						</div>
					</div>
				  	<div class="panel-body">
				    	{{newest[2].info}}
				  	</div>
				</div>
			</div>


			<!-- PAGE CONTENTS -->
			<div class="tab-content" >
				<!-- for the first item -->
				<div class="tab-pane" id="current">
					<ul class="nav nav-tabs">
						<li class="left" ><a href="#processed" data-toggle="tab">Неразрешени</a></li>
						<li class="left" ><a href="#processed" data-toggle="tab">В процес на разрешаване</a></li>
						<li class="left" ><a href="#processed" data-toggle="tab">Разрешени</a></li>
					</ul>
					<div class="tab-content" >
						<div class="tab-pane" id="unresolved">
							<h3>Неразрешени проблеми:</h3>
							<ul>
								<li ng-repeat="problem in problems">
									<div class="panel panel-default">
										<div class="panel-heading">
											<div class="panel-title">
												{{problem.name}}
											</div>
										</div>
										<div class="panel-body">
										  {{problem.info}}
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="tab-pane" id="processed">
							<h3>В процес на разрешаване:</h3>
							<ul>
								<li ng-repeat="processed in processed">
									<div class="panel panel-default">
										<div class="panel-heading" style="background-color:lightblue">
											<div class="panel-title">
												<h4>{{processed.name}}</h4>
											</div>
										</div>
										<div class="panel-body">
										  {{processed.info}}
										  <hr>
										  <h5><strong>Chosen solution:</strong></h5>
										  <hr>
										  	{{processed.solution}}
										  <hr>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- for the first item end -->
				<div class="tab-pane" id="data">{{data}}</div>
			</div>
		</div>

	</body>
</html>